<template>
  <div class="main">
    <!-- text -->
    <div v-if="fileType == 'text'" class="text-component" >
      <pre>{{ textPre }}</pre>
    </div>
    <!-- pdf -->
    <div v-else-if="fileType == 'pdf' && !loading" class="pdf-component">
      <iframe
        id="frame_box"
        class="file_view"
        :src="fileUrl"
        seamless
        frameborder="0"
      ></iframe>
    </div>
    <div v-else-if="fileType == ''">
      <br />
      "****"fileUrl"****" {{ fileUrl }} <br /><br />
      "****"fileUrl为空 / 不支持改文件预览 都不会显示下载按钮"****"
    </div>
  </div>
</template>

<script>
import renders from "./mixins";

// 去utils里找, 我只是借鉴
const getFileNameExt = (filePath) => {
  const dot = (filePath || "").lastIndexOf(".");
  let separator = (filePath || "").indexOf("?");
  if (separator == -1) separator = filePath.length;
  return dot !== -1 ? filePath.substring(dot, separator) : "";
};

export default {
  name: "filePreview",
  mixins: [renders],
  data() {
    return {
      // 文件类型
      fileType: "",
      // 是否为加载状态
      loading: true,
    };
  },

  props: {
    fileUrl: {
      type: String,
      required: false,
      default: "",
    },
  },

  watch: {
    fileUrl: {
      immediate: true,
      handler: function (value) {
        if (!value.trim()) return;

        // 获取文件后缀, 并转小写
        const fileExt = getFileNameExt(value).toLowerCase();
        this.renderFile(fileExt);
      },
    },
  },

  methods: {
    // 根据文件后缀, 判断文件类型, 调用对应渲染函数
    renderFile(fileExt) {
      this.loading = true;

      const { handlers } = this;
      for (let i = 0; i < handlers.length; i++) {
        if (handlers[i].accepts.indexOf(fileExt) != -1) {
          // 获取文件类型
          this.fileType = handlers[i].fileType;
          // 调用对应函数处理
          if (handlers[i].handler) {
            return handlers[i].handler().then(() => {
              this.loading = false;
            });
          }
          this.loading = false;
          return;
        }
      }
      // 其他文件类型
      this.renderError();
      this.loading = false;
    },

    // error
    renderError() {
      this.fileType = "";
      this.$message.error("不支持该文件类型");
      console.error("不支持该文件类型");
    },

    // 文件下载
    downloadFile() {
      window.open(this.fileUrl);
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.pdf-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.text-component{
  width: 100%;
  height: 100%;
  overflow: scroll;
  font-size: 18px;
  line-height: 30px;
  white-space: pre-line;
}
.file_view {
  width: 100%;
  height: 100%;
}
</style>
